import Header from "@/components/Header"; // Assuming alias @ is configured for src
import AppCard from "@/components/AppCard";
import { mockAppData } from "./mockData";
import { Sparkles } from 'lucide-react'; // For Hero section icon

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-900 text-gray-100 flex flex-col">
      <Header />

      {/* Hero Section */}
      <section className="bg-gradient-to-br from-gray-900 via-gray-800 to-cyan-900/30 text-white py-16 sm:py-24 md:py-32">
        <div className="container mx-auto px-6 text-center">
          <div className="inline-block p-3 mb-6 bg-cyan-500/20 rounded-full">
            <Sparkles size={48} className="text-cyan-400" />
          </div>
          <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 tracking-tight">
            释放创想，<span className="text-cyan-400">智绘未来</span>
          </h1>
          <p className="text-lg sm:text-xl text-gray-300 max-w-3xl mx-auto mb-10">
            专为艺术教育打造的AI工具平台，探索人工智能在艺术创作、理论研究与教学实践中的无限可能。
          </p>
          {/* Optional: Call to action button */}
          {/* <button className="bg-cyan-500 hover:bg-cyan-600 text-white font-semibold px-8 py-3 rounded-lg text-lg transition-colors duration-300 shadow-lg hover:shadow-cyan-500/50">
            探索应用
          </button> */}
        </div>
      </section>

      {/* Application Showcase Section */}
      <main className="flex-grow container mx-auto px-4 sm:px-6 py-12">
        <h2 className="text-3xl font-semibold text-white mb-8 text-center sm:text-left">应用大厅</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {mockAppData.map((app) => (
            <AppCard key={app.id} app={app} />
          ))}
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-900 border-t border-gray-700/50 text-gray-400 py-8 text-center">
        <div className="container mx-auto px-6">
          <p>&copy; {new Date().getFullYear()} 艺智枢纽 (ArtIntelligence Hub). 保留所有权利.</p>
          <p className="text-sm mt-2">
            <a href="#" className="hover:text-cyan-400 transition-colors duration-300">关于我们</a> | 
            <a href="#" className="hover:text-cyan-400 transition-colors duration-300"> 联系方式</a> | 
            <a href="#" className="hover:text-cyan-400 transition-colors duration-300"> 服务条款</a>
          </p>
        </div>
      </footer>
    </div>
  );
}

